/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
const creator = '伊夕'
const list = document.querySelector('.list')
const btn = document.querySelector('.btn ')

const btnDismiss = document.querySelector('.modal-footer .btn-primary')
const add_btn = document.querySelector('.add-btn')
const add_form= document.querySelector('.add-form');
const del = document.querySelector('.del')
const edit_btn = document.querySelector('.edit-btn')
const edit_form = document.querySelector('.edit-form')
// 添加弹窗控制
const addModal = new bootstrap.Modal(document.querySelector('.add-modal'))

// 编辑弹窗
const editModal = new bootstrap.Modal(document.querySelector('.edit-modal'))

// 渲染函数

async function render() {
  const {
    data: { data },
  } = await axios.get('http://hmajax.itheima.net/api/books', {
    params: { creator },
  })
  list.innerHTML = data
    .map((item, index) => {
      const { author, bookname, id, publisher } = item
      return `<tr>
      <td>${index + 1}</td>
      <td>${bookname}</td>
      <td>${author}</td>
      <td>${publisher}</td>
      <td data-id=${id}>
        <span class="del">删除</span>
        <span class="edit">编辑</span>
      </td>
    </tr>`
    })
    .join('')
}
render()
// 增加
btn.addEventListener('click', function () {
 
  addModal.show()
})
add_btn.addEventListener('click',async function(e){
  const form=serialize(add_form,{hash:true,empty:true})
  const {data}=await axios.post('http://hmajax.itheima.net/api/books',{creator,...form,})
  render()
  addModal.hide()
  
})
document.querySelector('.btn-close').addEventListener('click',function(){
  addModal.hide()
})
//

// 删除
list.addEventListener('click', async function (e) {
  if (!e.target.classList.contains('del')) {
    return
  }
  const id = e.target.parentNode.dataset.id
  
  const { data } = await axios.delete(`http://hmajax.itheima.net/api/books/${id}`)
  render()
})
// 编辑
list.addEventListener('click', async function (e) {
  if (!e.target.classList.contains('edit')) {
    return
  }
  const id = e.target.parentNode.dataset.id
  console.log(id);
  const {data:{data}}=await axios.get(`http://hmajax.itheima.net/api/books/${id}`)
  
   
  Object.keys(data).forEach(item=>{
    document.querySelector(`.edit-form .${item}`).value=data[item]
  })
  
  editModal.show()

})
edit_btn.addEventListener('click',async function(e){
  const {bookname,author,publisher,creator,id}=serialize(edit_form,{hash:true,empty:true})
 const res=await axios.put(`http://hmajax.itheima.net/api/books/${id}`,{bookname,author,publisher,creator})
 render()
 editModal.hide()
})
/**
 * 目标2：新增图书
 *  2.1 新增弹框->显示和隐藏
 *  2.2 收集表单数据，并提交到服务器保存
 *  2.3 刷新图书列表
 */

/**
 * 目标3：删除图书
 *  3.1 删除元素绑定点击事件->获取图书id
 *  3.2 调用删除接口
 *  3.3 刷新图书列表
 */

/**
 * 目标4：编辑图书
 *  4.1 编辑弹框->显示和隐藏
 *  4.2 获取当前编辑图书数据->回显到编辑表单中
 *  4.3 提交保存修改，并刷新列表
 */
